<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">

    <title>寻源需求管理</title>
    <!-- <link href="lib/css/meterial-icons.css" rel="stylesheet"> -->
    <link href="../lib/fonts/material-icons.css?family=Material+Icons" rel="stylesheet">
    <link href="../lib/css/animate.min.css" rel="stylesheet">
    <link href="../lib/css/quasar.mat.rtl.min.css" rel="stylesheet" type="text/css">
    
    <style type="text/css">
      [v-cloak] { display: none }
      .bd-light { border: 1px solid rgba(0, 0, 0, .1) }
    </style>
  </head>
  <body>
    <div id="q-sorManage" v-cloak class="q-pa-md">
      <q-tabs inverted>
        <!-- 选项卡 - 注意slot="title" -->
        <q-tab 
          default 
          slot="title" 
          name="tab-1"
          @select="getListMain({pagination: serverPaginationMain})"
          >{{ $t('主视图') }}</q-tab>
        <q-tab 
          slot="title" 
          name="tab-2" 
          @select="getListDetails({pagination: serverPaginationDetails})"
          >{{ $t('明细视图') }}</q-tab>
      
        <!-- 目标 -->
        <q-tab-pane name="tab-1" style="min-height: 500px">
          <q-card class="bg-white no-shadow full-width">
            <q-card-main>
              <div class="row justify-start gutter-sm q-px-sm">
                <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <q-input
                    :float-label="$t('名称')"
                    v-model.trim="searchFormMain.search_LIKE_name"></q-input>
                </q-field>
                <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <q-input
                    :float-label="$t('申请人')"
                    v-model.trim="searchFormMain.search_LIKE_proposerName"></q-input>
                </q-field>
                <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <q-select
                    :float-label="$t('状态')"
                    :options="statusOptions"
                    v-model.trim="searchFormMain.search_EQ_status"></q-select>
                </q-field>
                <q-slide-transition>
                  <q-field v-if="isShowMoreSearch" class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <q-input
                      :float-label="$t('项目名称')"
                      v-model.trim="searchFormMain.search_LIKE_projectName"></q-input>
                  </q-field>
                </q-slide-transition>
              </div>
              <div class="row justify-end q-my-sm">
                <q-btn
                  size="sm"
                  push
                  @click="searchMain"
                  color="primary"
                  :loading="btnLoadingSearch"
                  class="q-mt-sm q-mr-sm q-pa-sm">
                  <span slot="loading">
                    <q-spinner-hourglass></q-spinner-hourglass>
                    搜索中
                  </span>
                  <q-icon name="search"></q-icon>
                  <span>{{ $t('查询') }}</span>
                </q-btn>
                <q-btn
                  size="sm"
                  push
                  color="secondary"
                  @click="resetMain"
                  :loading="btnLoadingReset"
                  class="q-mt-sm q-mr-sm q-pa-sm">
                  <span slot="loading">
                    <q-spinner-hourglass></q-spinner-hourglass>
                    重置中
                  </span>
                  <q-icon name="refresh" ></q-icon>
                  <span>{{ $t('重置') }}</span>
                </q-btn>
                <q-btn
                  flat
                  size="sm"
                  class="q-mt-sm q-mr-xs q-pa-sm"
                  color="primary"
                  @click="isShowMoreSearch = !isShowMoreSearch">
                  <span v-if="isShowMoreSearch">{{ $t('收起') }}</span>
                  <span v-else>{{ $t('展开') }}</span>
                  <q-icon v-if="isShowMoreSearch" name="keyboard arrow up" ></q-icon>
                  <q-icon v-else name="keyboard arrow down" ></q-icon>
                </q-btn>
              </div>
              <q-table
                class="no-shadow"
                :data="viewDataMain"
                dense
                hide-bottom
                :columns="columnsMain"
                :rows-per-page-options="[5, 10, 20]"
                selection="multiple"
                :loading="listLoading"
                :selected.sync="selectedMain"
                :pagination.sync="serverPaginationMain"
                @request="getListMain"
                row-key="id"
              >
                <template slot="top-left" slot-scope="props">
                  <q-btn
                    color="primary"
                    outline
                    size="xs"
                    :label="$t('新增')"
                    @click="mainViewAddOrEdit(1)"
                    class="q-mr-sm" ></q-btn>
                  <q-btn
                    color="primary"
                    outline
                    size="xs"
                    :label="$t('激活')"
                    @click="mainViewActivate"
                    class="q-mr-sm" ></q-btn>
                  <q-btn
                    color="primary"
                    outline
                    size="xs"
                    :label="$t('导入')"
                    class="q-mr-sm" ></q-btn>
                  <q-btn
                    color="primary"
                    outline
                    size="xs"
                    :label="$t('导出')"
                    class="q-mr-sm" ></q-btn>
                  <q-btn
                    color="negative"
                    outline
                    size="xs"
                    :label="$t('删除')"
                    @click="mainViewDelete"
                    class="q-mr-sm"></q-btn>
                </template>
                <!-- <div slot="pagination" slot-scope="props" class="row flex-center q-py-sm">
                  第
                  <q-pagination
                    v-model="serverPaginationMain.page"
                    input
                    boundary-links
                    direction-links
                    color="primary"
                    :max-pages="5"
                    :ellipses="true"
                    :max="pagesMain"></q-pagination>
                  页 &nbsp; 共 {{ totalMain }} 条
                </div> -->
                <template slot="body" slot-scope="props">
                  <q-tr
                    :props="props"
                  >
                    <q-td >
                      <q-checkbox color="primary" v-model="props.selected"></q-checkbox>
                    </q-td>
                    <q-td key="action" :props="props" >
                      <q-btn
                        flat
                        round
                        size="xs"
                        color="primary"
                        v-if="props.row.status != 1"
                        @click="goEdit(props.row.id, props.row.code)"
                      >
                        {{ $t('修改') }}
                      </q-btn>
                      <q-btn
                        flat
                        round
                        size="xs"
                        color="primary"
                        @click="goPreview(props.row.id)"
                        >
                        {{ $t('查看') }}
                      </q-btn>
                    </q-td>
                    <q-td key="erpCode" :props="props" >
                      {{ props.row.erpCode }}
                    </q-td>
                    <q-td key="code" :props="props" >
                      {{ props.row.code }}
                    </q-td>
                    <q-td key="name" :props="props" >
                      {{ props.row.name }}
                    </q-td>
                    <q-td key="projectCode" :props="props" >
                      {{ props.row.projectCode }}
                    </q-td>
                    <q-td key="projectName" :props="props" >
                      {{ props.row.projectName }}
                    </q-td>
                    <q-td key="proposerName" :props="props" >
                      {{ props.row.proposerName }}
                    </q-td>
                    <q-td key="companyName" :props="props" >
                      {{ props.row.companyName }}
                    </q-td>
                    <q-td key="depName" :props="props" >
                      {{ props.row.depName }}
                    </q-td>
                    <q-td key="applyDate" :props="props" >
                      {{ props.row.applyDate }}
                    </q-td>
                    <q-td key="requiredFinishTime" :props="props" >
                      {{ props.row.requiredFinishTime }}
                    </q-td>
                    <q-td key="status" :props="props" >
                      <q-chip v-if="props.row.status == 1" dense square color="positive">激活</q-chip>
                      <q-chip v-if="props.row.status == 0" dense square color="light">草稿</q-chip>
                    </q-td>
                    <q-td key="createTime" :props="props" >
                      {{ props.row.createTime }}
                    </q-td>
                    <q-td key="createUserName" :props="props" >
                      {{ props.row.createUserName }}
                    </q-td>
                  </q-tr>
                </template>
              </q-table>
              <div class="row justify-end items-center text-faded">
                每页的行数：
                <q-select 
                  :options="[{label: '5', value: 5},{label: '10', value: 10},{label: '20', value: 20}]" 
                  hide-underline
                  class="q-mr-md"
                  v-model="serverPaginationMain.rowsPerPage"></q-select>
                第
                <q-pagination
                  class="q-mt-xs"
                  v-model="serverPaginationMain.page"
                  input
                  boundary-links
                  direction-links
                  :max-pages="5"
                  :ellipses="true"
                  :max="pagesMain"></q-pagination>
                页 &nbsp; 共 {{ totalMain }} 条
              </div>
            </q-card-main>
          </q-card>
        </q-tab-pane>
        <q-tab-pane name="tab-2" style="min-height: 500px">
          <q-card class="bg-white no-shadow full-width">
            <q-card-main>
              <div class="row justify-start gutter-sm q-px-sm">
                <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <q-input
                    :float-label="$t('名称')"
                    v-model.trim="searchFormDetails.search_LIKE_name"></q-input>
                </q-field>
                <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <q-input
                    :float-label="$t('申请人')"
                    v-model.trim="searchFormDetails.search_LIKE_proposerName"></q-input>
                </q-field>
                <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <q-select
                    :float-label="$t('状态')"
                    :options="statusOptions"
                    v-model.trim="searchFormDetails.search_EQ_status"></q-select>
                </q-field>
                <q-slide-transition>
                  <q-field v-if="isShowMoreSearch" class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <q-input
                      :float-label="$t('项目名称')"
                      v-model.trim="searchFormDetails.search_LIKE_projectName"></q-input>
                  </q-field>
                </q-slide-transition>
              </div>
              <div class="row justify-end q-my-sm">
                <q-btn
                  size="sm"
                  push
                  @click="searchDetails"
                  color="primary"
                  :loading="btnLoadingSearch"
                  class="q-mt-sm q-mr-sm q-pa-sm">
                  <span slot="loading">
                    <q-spinner-hourglass></q-spinner-hourglass>
                    搜索中
                  </span>
                  <q-icon name="search"></q-icon>
                  <span>{{ $t('查询') }}</span>
                </q-btn>
                <q-btn
                  size="sm"
                  push
                  color="secondary"
                  @click="resetDetails"
                  :loading="btnLoadingReset"
                  class="q-mt-sm q-mr-sm q-pa-sm">
                  <span slot="loading">
                    <q-spinner-hourglass></q-spinner-hourglass>
                    重置中
                  </span>
                  <q-icon name="refresh" ></q-icon>
                  <span>{{ $t('重置') }}</span>
                </q-btn>
                <q-btn
                  flat
                  size="sm"
                  class="q-mt-sm q-mr-xs q-pa-sm"
                  color="primary"
                  @click="isShowMoreSearch = !isShowMoreSearch">
                  <span v-if="isShowMoreSearch">{{ $t('收起') }}</span>
                  <span v-else>{{ $t('展开') }}</span>
                  <q-icon v-if="isShowMoreSearch" name="keyboard arrow up" ></q-icon>
                  <q-icon v-else name="keyboard arrow down" ></q-icon>
                </q-btn>
              </div>
              <q-table
                class="no-shadow"
                :data="viewDataDetails"
                dense
                hide-bottom
                :columns="columnsDetails"
                :rows-per-page-options="[5, 10, 20]"
                selection="multiple"
                :loading="listLoading"
                :selected.sync="selectedDetails"
                :pagination.sync="serverPaginationDetails"
                row-key="id"
              >
                <template slot="top-left" slot-scope="props">
                  <!-- <q-btn
                    color="primary"
                    outline
                    size="xs"
                    :label="$t('新增')"
                    @click="mainViewAddOrEdit(1)"
                    class="q-mr-sm" ></q-btn> -->
                  <!-- <q-btn
                    color="primary"
                    outline
                    size="xs"
                    :label="$t('激活')"
                    @click="detailsViewActivate"
                    class="q-mr-sm" ></q-btn> -->
                  <q-btn
                    color="primary"
                    outline
                    size="xs"
                    :label="$t('导入')"
                    class="q-mr-sm" ></q-btn>
                  <q-btn
                    color="primary"
                    outline
                    size="xs"
                    :label="$t('导出')"
                    class="q-mr-sm" ></q-btn>
                  <q-btn
                    color="negative"
                    outline
                    size="xs"
                    :label="$t('删除')"
                    @click="detailsViewDelete"
                    class="q-mr-sm"></q-btn>
                </template>
                <!-- <div slot="pagination" slot-scope="props" class="row flex-center q-py-sm">
                  第
                  <q-pagination
                    v-model="serverPaginationDetails.page"
                    input
                    boundary-links
                    direction-links
                    color="primary"
                    :max-pages="5"
                    :ellipses="true"
                    :max="pagesDetails"></q-pagination>
                  页 &nbsp; 共 {{ totalDetails }} 条
                </div> -->
                <template slot="body" slot-scope="props">
                  <q-tr
                    :props="props"
                  >
                    <q-td >
                      <q-checkbox color="primary" v-model="props.selected"></q-checkbox>
                    </q-td>
                    <q-td key="action" :props="props" >
                      <q-btn
                        flat
                        round
                        size="xs"
                        color="primary"
                        v-if="props.row.sorHeaderEntity.status != 1"
                        @click="goEdit(props.row.sorHeaderEntity.id, props.row.sorHeaderEntity.code)"
                      >
                        {{ $t('修改') }}
                      </q-btn>
                      <q-btn
                        flat
                        round
                        size="xs"
                        color="primary"
                        @click="goPreview(props.row.sorHeaderEntity.id)"
                        >
                        {{ $t('查看') }}
                      </q-btn>
                    </q-td>
                    <q-td key="sorHeaderEntity.erpCode" :props="props" >
                      {{ props.row.sorHeaderEntity.erpCode }}
                    </q-td>
                    <q-td key="sorHeaderEntity.code" :props="props" >
                      {{ props.row.sorHeaderEntity.code }}
                    </q-td>
                    <q-td key="sorHeaderEntity.name" :props="props" >
                      {{ props.row.sorHeaderEntity.name }}
                    </q-td>
                    <q-td key="itemNo" :props="props" >
                      {{ props.row.itemNo }}
                    </q-td>
                    <q-td key="matCode" :props="props" >
                      {{ props.row.matCode }}
                    </q-td>
                    <q-td key="matName" :props="props" >
                      {{ props.row.matName }}
                    </q-td>
                    <q-td key="matState" :props="props" >
                      <q-chip v-if="props.row.matState == 1" dense square color="info">新开发</q-chip>
                      <q-chip v-if="props.row.matState == 2" dense square color="info">借用件</q-chip>
                      <q-chip v-if="props.row.matState == 3" dense square color="info">改制件</q-chip>
                    </q-td>
                    <q-td key="matCategoryName" :props="props" >
                      {{ props.row.matCategoryName }}
                    </q-td>
                    <q-td key="carSeriesName" :props="props" >
                      {{ props.row.carSeriesName }}
                    </q-td>
                    <q-td key="quantity" :props="props" >
                      {{ props.row.quantity }}
                    </q-td>
                    <q-td key="unitName" :props="props" >
                      {{ props.row.unitName }}
                    </q-td>
                    <q-td key="sorHeaderEntity.projectType" :props="props" >
                      {{ props.row.sorHeaderEntity.projectType }}
                    </q-td>
                    <q-td key="sorHeaderEntity.projectCode" :props="props" >
                      {{ props.row.sorHeaderEntity.projectCode }}
                    </q-td>
                    <q-td key="sorHeaderEntity.projectName" :props="props" >
                      {{ props.row.sorHeaderEntity.projectName }}
                    </q-td>
                    <q-td key="sorHeaderEntity.proposerName" :props="props" >
                      {{ props.row.sorHeaderEntity.proposerName }}
                    </q-td>
                    <q-td key="sorHeaderEntity.companyName" :props="props" >
                      {{ props.row.sorHeaderEntity.companyName }}
                    </q-td>
                    <q-td key="sorHeaderEntity.depName" :props="props" >
                      {{ props.row.sorHeaderEntity.depName }}
                    </q-td>
                    <q-td key="sorHeaderEntity.applyDate" :props="props" >
                      {{ props.row.sorHeaderEntity.applyDate }}
                    </q-td>
                    <q-td key="sorHeaderEntity.requiredFinishTime" :props="props" >
                      {{ props.row.sorHeaderEntity.requiredFinishTime }}
                    </q-td>
                    <q-td key="sorHeaderEntity.status" :props="props" >
                      <q-chip v-if="props.row.sorHeaderEntity.status == 1" dense square color="positive">激活</q-chip>
                      <q-chip v-if="props.row.sorHeaderEntity.status == 0" dense square color="light">草稿</q-chip>
                    </q-td>
                    <q-td key="createTime" :props="props" >
                      {{ props.row.createTime }}
                    </q-td>
                    <q-td key="createUserName" :props="props" >
                      {{ props.row.createUserName }}
                    </q-td>
                    <!-- <q-td key="taxCode" :props="props" >
                      {{ props.row.taxCode }}
                    </q-td>
                    <q-td key="deliveryTime" :props="props" >
                      {{ props.row.deliveryTime }}
                    </q-td>
                    <q-td key="minOrderQty" :props="props" >
                      {{ props.row.minOrderQty }}
                    </q-td> -->
                  </q-tr>
                </template>
              </q-table>
              <div class="row justify-end items-center text-faded">
                每页的行数：
                <q-select 
                  :options="[{label: '5', value: 5},{label: '10', value: 10},{label: '20', value: 20}]" 
                  hide-underline
                  class="q-mr-md"
                  v-model="serverPaginationDetails.rowsPerPage"></q-select>
                第
                <q-pagination
                  class="q-mt-xs"
                  v-model="serverPaginationDetails.page"
                  input
                  boundary-links
                  direction-links
                  :max-pages="5"
                  :ellipses="true"
                  :max="pagesDetails"></q-pagination>
                页 &nbsp; 共 {{ totalDetails }} 条
              </div>
            </q-card-main>
          </q-card>
        </q-tab-pane>
      </q-tabs>
    </div>
    
    <!-- ie-polyfill 、 vue.js and quasar-framework -->
    <script src="../lib/js/quasar.ie.polyfills.umd.min.js"></script>
    <script src="../lib/js/vue.js"></script>
    <script src="../lib/js/quasar.mat.umd.min.js"></script>
    <!-- babel for es6 transform -->
    <!-- <script src="lib/js/babel.min.js"></script> -->
    <!-- vue validate -->
    <script src="../lib/js/vuelidate.min.js"></script>
    <script src="../lib/js/validators.min.js"></script>
    <!-- consts ps: always leave this file first -->
    <script src="../script/consts.js"></script>
    <!-- status code -->
    <script src="../script/status.code.js"></script>
    <!-- qs for axios -->
    <script src="../lib/js/qs.min.js"></script>
    <!-- axios for http request -->
    <script src="../lib/js/axios.js"></script>
    <!-- axios.instance must be after axios -->
    <script src="../script/axios.instance2.js"></script>
    <!-- quasar i18n zh-hans -->
    <script src="../lib/lang/zh-hans.js"></script>
    <!-- vue-i18n for application's internationalization -->
    <script src="../lib/js/vue-i18n.js"></script>
    <!-- current page international file -->
    <script src="../lang/sor/sorManage.js"></script>
    <!--  -->
    <script src="../script/utils.js"></script>

    <script>
      // quasar components use
      Quasar.i18n.set(Quasar.i18n[LANGUGE])

      Vue.use(window.vuelidate.default)
      var minLength = window.validators.minLength
      var required = window.validators.required
      var email = window.validators.email

      var sorManage = new Vue({
        el: '#q-sorManage',
        i18n: i18n,
        data: function () {
          return {
            btnLoadingSearch: false,
            btnLoadingReset: false,
            // 主视图
            searchFormMain: {  // 搜索表单
              search_LIKE_name: '',
              search_LIKE_proposerName: '',
              search_EQ_status: '',
              search_LIKE_projectName: '',
            },
            statusOptions: [  // 状态选项
              {
                label: '请选择',
                value: ' '
              },
              {
                label: '草稿',
                value: 0
              },
              {
                label: '激活',
                value: 1
              }
            ],
            isShowMoreSearch: '', // 是否显示更多搜索
            viewDataMain: [],  // 主视图数据
            totalMain: 0,   // 主视图  总条数
            listLoading: false,  // 表单加载状态 通用
            selectedMain: [],  // 主视图 已选择行
            serverPaginationMain: {
              page: 1,
              rowsNumber: 5,
              rowsPerPage: 10
            },
            // 明细视图
            searchFormDetails: {  // 搜索表单
              search_LIKE_name: '',
              search_LIKE_proposerName: '',
              search_EQ_status: '',
              search_LIKE_projectName: '',
            },
            statusOptions: [  // 状态选项
              {
                label: '请选择',
                value: ' '
              },
              {
                label: '草稿',
                value: 0
              },
              {
                label: '激活',
                value: 1
              }
            ],
            isShowMoreSearch: '', // 是否显示更多搜索
            viewDataDetails: [],  // 主视图数据
            totalDetails: 0,   // 主视图  总条数
            listLoading: false,  // 表单加载状态 通用
            selectedDetails: [],  // 主视图 已选择行
            serverPaginationDetails: {
              page: 1,
              rowsNumber: 5,
              rowsPerPage: 10
            }
          }
        },
        validations: {
          
        },
        computed: {
          columnsMain: function() {
            return [
              {
                name: 'action',
                label: this.$t('操作'),
                align: 'center'
              },
              {
                name: 'erpCode',
                label: '源SOR编码',
                align: 'center'
              },
              {
                name: 'code',
                label: '编码',
                align: 'center',
                field: 'code',
                sortable: true
              },
              {
                name: 'name',
                label: 'SOR名称',
                align: 'center'
              },
              {
                name: 'projectCode',
                label: '源项目编码',
                align: 'center'
              },
              {
                name: 'projectName',
                label: '项目名称',
                align: 'center'
              },
              {
                name: 'proposerName',
                label: '申请人',
                align: 'center'
              },
              {
                name: 'companyName',
                label: '所属公司',
                align: 'center'
              },
              {
                name: 'depName',
                label: '所属部门',
                align: 'center'
              },
              {
                name: 'applyDate',
                label: 'SOR申请时间',
                align: 'center'
              },
              {
                name: 'requiredFinishTime',
                label: 'SOR要求定点时间',
                align: 'center'
              },
              {
                name: 'status',
                label: 'SOR状态',
                align: 'center',
                field: 'status',
                sortable: true
              },
              {
                name: 'createTime',
                label: '创建时间',
                align: 'center'
              },
              {
                name: 'createUserName',
                label: '创建人',
                align: 'center'
              }
            ]
          },
          pagesMain: function() {
            return Math.ceil(this.totalMain / this.serverPaginationMain.rowsPerPage)
          },
          columnsDetails: function() {
            return [
              {
                name: 'action',
                label: this.$t('操作'),
                align: 'center'
              },
              {
                name: 'sorHeaderEntity.erpCode',
                label: '源SOR编码',
                align: 'center'
              },
              {
                name: 'sorHeaderEntity.code',
                label: '编码',
                align: 'center'
              },
              {
                name: 'sorHeaderEntity.name',
                label: 'SOR名称',
                align: 'center'
              },
              {
                name: 'itemNo',
                label: '行号',
                align: 'center'
              },
              {
                name: 'matCode',
                label: '零件编码',
                align: 'center'
              },
              {
                name: 'matName',
                label: '零件名称',
                align: 'center'
              },
              {
                name: 'matState',
                label: '零件状态',
                align: 'center'
              },
              {
                name: 'matCategoryName',
                label: '品类',
                align: 'center'
              },
              {
                name: 'carSeriesName',
                label: '车型',
                align: 'center'
              },
              {
                name: 'quantity',
                label: '数量',
                align: 'center'
              },
              {
                name: 'unitName',
                label: '单位',
                align: 'center'
              },
              {
                name: 'sorHeaderEntity.projectType',
                label: '项目类型',
                align: 'center'
              },
              {
                name: 'sorHeaderEntity.projectCode',
                label: '源项目编码',
                align: 'center'
              },
              {
                name: 'sorHeaderEntity.projectName',
                label: '项目名称',
                align: 'center'
              },
              {
                name: 'sorHeaderEntity.proposerName',
                label: '申请人',
                align: 'center'
              },
              {
                name: 'sorHeaderEntity.companyName',
                label: '所属公司',
                align: 'center'
              },
              {
                name: 'sorHeaderEntity.depName',
                label: '所属部门',
                align: 'center'
              },
              {
                name: 'sorHeaderEntity.applyDate',
                label: 'SOR申请时间',
                align: 'center'
              },
              {
                name: 'sorHeaderEntity.requiredFinishTime',
                label: 'SOR要求定点时间',
                align: 'center'
              },
              {
                name: 'sorHeaderEntity.status',
                label: 'SOR状态',
                align: 'center'
              },
              {
                name: 'createTime',
                label: '创建时间',
                align: 'center'
              },
              {
                name: 'createUserName',
                label: '创建人',
                align: 'center'
              },
              // {
              //   name: 'taxCode',
              //   label: '税码',
              //   align: 'center'
              // },
              // {
              //   name: 'deliveryTime',
              //   label: '计划要货时间（天数）',
              //   align: 'center'
              // },
              // {
              //   name: 'minOrderQty',
              //   label: '最小订单数量',
              //   align: 'center'
              // },
            ]
          },
          pagesDetails: function() {
            return Math.ceil(this.totalDetails / this.serverPaginationDetails.rowsPerPage)
          },
        },
        created: function () {
          
        },
        watch: {
          'serverPaginationMain.rowsPerPage': function(rowsPerPage) {
            this.getListMain({ pagination: this.serverPaginationMain })
          },
          'serverPaginationMain.page': function(page) {
            this.getListMain({ pagination: this.serverPaginationMain })
          },
          'serverPaginationDetails.rowsPerPage': function(rowsPerPage) {
            this.getListDetails({ pagination: this.serverPaginationDetails })
          },
          'serverPaginationDetails.page': function(page) {
            this.getListDetails({ pagination: this.serverPaginationDetails })
          }
        },
        methods: {
          // 主视图
          getListMain: function(arg) {
            this.listLoading = true
            this.serverPaginationMain = arg.pagination
            var that = this
            axios({
              method: 'post',
              url: '/manager/sor/main/query', 
              data: {
                page: this.serverPaginationMain.page,
                rows: this.serverPaginationMain.rowsPerPage,
                sort: this.serverPaginationMain.sortBy,
                order: this.serverPaginationMain.descending == true? 'desc' : (this.serverPaginationMain.descending == false? 'asc' : null),
                search_LIKE_name: this.searchFormMain.search_LIKE_name,
                search_LIKE_proposerName: this.searchFormMain.search_LIKE_proposerName,
                search_EQ_status: this.searchFormMain.search_EQ_status,
                search_LIKE_projectName: this.searchFormMain.search_LIKE_projectName
              }
            })
            .then(function(data) {
              that.viewDataMain = data.rows
              that.totalMain = data.total
              that.listLoading = false
              that.btnLoadingSearch = false
              that.btnLoadingReset = false
            })
            .catch(function(err) {
              console.log(err)
            })
          },
          searchMain: function() {
            this.btnLoadingSearch = true
            this.getListMain({
              pagination: this.serverPaginationMain
            })
          },
          resetMain: function() {
            this.btnLoadingReset = true
            this.searchFormMain = { 
              search_LIKE_name: '',
              search_LIKE_proposerName: '',
              search_EQ_status: '',
              search_LIKE_projectName: '',
            }
            this.getListMain({
              pagination: this.serverPaginationMain
            })
          },
          // 主视图新增 编辑
          mainViewAddOrEdit: function(type, id) {
            // type: 1 新增  2 编辑
            if (type == 1) {
              window.location.href = './sorMaintenance.html?addOrEdit=' + type
            } 
            if (type == 2) {
              window.location.href = './sorMaintenance.html?addOrEdit=' + type + '&id=' + id
            }
          },
          // 激活 批量
          mainViewActivate: function() {
            var that = this
            if (this.selectedMain.length > 0) {
              this.$q.dialog({
                title: '确认',
                message: '确认要激活选中的'+ this.selectedMain.length + '条数据吗？',
                ok: {
                  label: '确认',
                  flat: true
                },
                cancel: {
                  label: '取消',
                  flat: true
                }
              })
              .then(function() {
                var idSelected = []
                that.selectedMain.forEach(function(e) {
                  idSelected.push(e.id)
                })
                axios({
                  method: 'post',
                  url: '/manager/sor/main/active',
                  data: {
                    ids: idSelected.join(',')
                  }
                })
                .then(function(data) {
                  if (data.success) {
                    that.$q.notify({
                      message: '操作成功',
                      type: 'positive',
                      icon: 'done',
                      timeout: 1000,
                      position: 'top-right'
                    })
                    that.selectedMain = []
                  } else {
                    that.$q.notify({
                      message: data.msg,
                      type: 'negative',
                      icon: 'error_outline',
                      timeout: 1000,
                      position: 'top-right'
                    })
                  }
                  that.getListMain({ pagination: that.serverPaginationMain })
                })
                .catch(function(err) {
                  console.log(err)
                })
              })
              .catch(function() {
                // 选择"Cancel"或作了关闭操作
              })
            } else {
              this.$q.notify({
                message: '请先勾选，再执行该操作！',
                type: 'warning',
                icon: 'warning',
                timeout: 1000,
                position: 'top-right'
              })
            }
          },
          // 删除 批量
          mainViewDelete: function() {
            var that = this
            if (this.selectedMain.length > 0) {
              this.$q.dialog({
                title: '确认',
                message: '确认要删除选中的'+ this.selectedMain.length + '条数据吗？',
                ok: {
                  label: '确认',
                  flat: true
                },
                cancel: {
                  label: '取消',
                  flat: true
                }
              })
              .then(function() {
                var idSelected = []
                that.selectedMain.forEach(function(e) {
                  idSelected.push(e.id)
                })
                axios({
                  method: 'post',
                  url: '/manager/sor/main/delete',
                  data: {
                    ids: idSelected.join(',')
                  }
                })
                .then(function(data) {
                  if (data.success) {
                    that.$q.notify({
                      message: '操作成功',
                      type: 'positive',
                      icon: 'done',
                      timeout: 1000,
                      position: 'top-right'
                    })
                    that.selectedMain = []
                    that.getListMain({ pagination: that.serverPaginationMain })
                  } else {
                    that.$q.notify({
                      message: data.msg,
                      type: 'negative',
                      icon: 'error_outline',
                      timeout: 1000,
                      position: 'top-right'
                    })
                  }
                })
                .catch(function(err) {
                  console.log(err)
                })
              })
              .catch(function() {
                // 选择"Cancel"或作了关闭操作
              })
            } else {
              this.$q.notify({
                message: '请先勾选，再执行该操作！',
                type: 'warning',
                icon: 'warning',
                position: 'top-right'
              })
            }
          },
          // 明细视图
          getListDetails: function(arg) {
            this.listLoading = true
            this.serverPaginationDetails = arg.pagination
            var that = this
            axios({
              method: 'post',
              url: '/manager/sor/item/query',
              data: {
                page: this.serverPaginationDetails.page,
                rows: this.serverPaginationDetails.rowsPerPage,
                sort: this.serverPaginationDetails.sortBy,
                order: this.serverPaginationDetails.descending == true? 'desc' : (this.serverPaginationDetails.descending == false? 'asc' : null),
                search_LIKE_name: this.searchFormDetails.search_LIKE_name,
                search_LIKE_proposerName: this.searchFormDetails.search_LIKE_proposerName,
                search_EQ_status: this.searchFormDetails.search_EQ_status,
                search_LIKE_projectName: this.searchFormDetails.search_LIKE_projectName
              }
            })
            .then(function(data) {
              that.viewDataDetails = data.rows
              that.totalDetails = data.total
              that.listLoading = false
              that.btnLoadingSearch = false
              that.btnLoadingReset = false
            })
            .catch(function(err) {
              console.log(err)
            })
          },
          searchDetails: function() {
            this.btnLoadingSearch = true
            this.getListDetails({
              pagination: this.serverPaginationDetails
            })
          },
          resetDetails: function() {
            this.btnLoadingReset = true
            this.searchFormDetails = { 
              search_LIKE_name: '',
              search_LIKE_proposerName: '',
              search_EQ_status: '',
              search_LIKE_projectName: '',
            }
            this.getListDetails({
              pagination: this.serverPaginationDetails
            })
          },
          // 明细视图新增  同主视图新增  增主视图 行项目
          detailsViewAddOrEdit: function(type, id) {
            // type: 1 新增  2 编辑
            if (type == 1) {
              window.location.href = './sorMaintenance.html?addOrEdit=' + type
            } 
            if (type == 2) {
              window.location.href = './sorMaintenance.html?addOrEdit=' + type + '&id=' + id
            }
          },
          // 激活 批量
          detailsViewActivate: function() {
            var that = this
            if (this.selectedDetails.length > 0) {
              this.$q.dialog({
                title: '确认',
                message: '确认要激活选中的'+ this.selectedDetails.length + '条数据吗？',
                ok: {
                  label: '确认',
                  flat: true
                },
                cancel: {
                  label: '取消',
                  flat: true
                }
              })
              .then(function() {
                var idSelected = []
                that.selectedDetails.forEach(function(e) {
                  idSelected.push(e.id)
                })
                axios({
                  method: 'post',
                  url: '',  // TODO:
                  data: {
                    ids: idSelected.join(',')
                  }
                })
                .then(function(data) {
                  if (data.success) {
                    that.$q.notify({
                      message: '操作成功',
                      type: 'positive',
                      icon: 'done',
                      timeout: 1000,
                      position: 'top-right'
                    })
                    that.selectedDetails = []
                  } else {
                    that.$q.notify({
                      message: data.msg,
                      type: 'negative',
                      icon: 'error_outline',
                      timeout: 1000,
                      position: 'top-right'
                    })
                  }
                  that.getListDetails({ pagination: that.serverPaginationDetails })
                })
                .catch(function(err) {
                  console.log(err)
                })
              })
              .catch(function() {
                // 选择"Cancel"或作了关闭操作
              })
            } else {
              this.$q.notify({
                message: '请先勾选，再执行该操作！',
                type: 'warning',
                icon: 'warning',
                timeout: 1000,
                position: 'top-right'
              })
            }
          },
          // 删除 批量
          detailsViewDelete: function() {
            var that = this
            if (this.selectedDetails.length > 0) {
              this.$q.dialog({
                title: '确认',
                message: '确认要删除选中的'+ this.selectedDetails.length + '条数据吗？',
                ok: {
                  label: '确认',
                  flat: true
                },
                cancel: {
                  label: '取消',
                  flat: true
                }
              })
              .then(function() {
                var idSelected = []
                that.selectedDetails.forEach(function(e) {
                  idSelected.push(e.id)
                })
                axios({
                  method: 'post',
                  url: '/manager/sor/item/delete',
                  data: {
                    ids: idSelected.join(','),
                    type: 1
                  }
                })
                .then(function(data) {
                  if (data.success) {
                    that.$q.notify({
                      message: '操作成功',
                      type: 'positive',
                      icon: 'done',
                      timeout: 1000,
                      position: 'top-right'
                    })
                    that.selectedDetails = []
                    that.getListDetails({ pagination: that.serverPaginationDetails })
                  } else {
                    that.$q.notify({
                      message: data.msg,
                      type: 'negative',
                      icon: 'error_outline',
                      timeout: 1000,
                      position: 'top-right'
                    })
                  }
                })
                .catch(function(err) {
                  console.log(err)
                })
              })
              .catch(function() {
                // 选择"Cancel"或作了关闭操作
              })
            } else {
              this.$q.notify({
                message: '请先勾选，再执行该操作！',
                type: 'warning',
                icon: 'warning',
                position: 'top-right'
              })
            }
          },
          // 查看
          goPreview: function(id) {
            window.location.href = 'sorPreview.html?id=' + id
          },
          goEdit: function(id, code) {
            window.location.href = 'sorMaintenance.html?addOrEdit=2&id=' + id + '&code=' + code
          }
        }
      })
    </script>
  </body>
</html>